import React, {FC, useEffect} from "react";
import {Button, Col, Form, Input, message, Row, Select} from "antd";
import {inject, observer} from "_mobx-react@6.3.1@mobx-react";
import {reg, roleList} from "../../../utils";
import api from "../../../api";
import BreadcrumbPath from "../../../components/BreadcrumbPath";

const AddUser: FC<any> = ({MobxData}) => {

    const [form] = Form.useForm();
    //班级信息
    const {classList, getClassList, changeClassList} = MobxData;

    const [role, setRole] = React.useState(0);

    useEffect(() => {
        getClassList();
    }, [])

    return (
        <div>
            {/*<h1>添加用户</h1>*/}
            <BreadcrumbPath/>
            <Form
                style={{width: '40%', backgroundColor: '#fff', padding: '20px', borderRadius: "10px",}}
                name="basic"
                form={form}
                layout='vertical'
                onFinish={(values) => {
                    api.addUser(values).then(res => {
                        message.success(res.msg);
                        form.resetFields();
                    }).catch(err => {
                        message.error(err);
                    })
                }}
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[{required: true, message: '用户名不能为空!'}]}
                >
                    <Input placeholder="请输入用户名"/>
                </Form.Item>
                <Form.Item
                    label="手机号码"
                    name="phone"
                    rules={[{required: true, message: '手机号码不能为空!'}, {pattern: reg.phone, message: '请输入正确的手机号码!'}]}
                >
                    <Input placeholder="请输入手机号码"/>
                </Form.Item>
                <Form.Item
                    label="密码"
                    name="password"
                    rules={[
                        {required: true, message: '密码不能为空!'},
                        {pattern: reg.password, message: '请输入6-16的密码包含数字、字母、字符中的两种!'}
                    ]}
                >
                    <Input placeholder="请输入密码"/>
                </Form.Item>
                <Row>
                    <Col span={12}>
                        <Form.Item
                            label="角色"
                            name="role"
                            rules={[{required: true, message: '用户角色不能为空!'}]}
                        >
                            <Select style={{width: "100%"}} onChange={(value) => {
                                setRole(value)
                            }}>
                                {
                                    roleList.map((item: any) => {
                                        return <Select.Option value={item.id}
                                                              key={item.id}>{item.name}</Select.Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                    {
                        role < 1 && (
                            <Col span={12}>
                                <Form.Item
                                    label="班级"
                                    name="classname"
                                    rules={[{required: true, message: '班级名称不能为空!'}]}
                                >
                                    <Select placeholder="请选择班级" style={{width: "100%"}} onChange={() => {
                                    }}>
                                        {
                                            classList.map((item: any) => {
                                                return <Select.Option value={item.name}
                                                                      key={item._id}>{item.name}</Select.Option>
                                            })
                                        }
                                    </Select>
                                </Form.Item>
                            </Col>
                        )
                    }
                </Row>

                <Form.Item>
                    <Button block size="large" type="primary" htmlType="submit">添加</Button>
                </Form.Item>
            </Form>
        </div>
    )
}
export default inject('MobxData')(observer(AddUser));